<template>
	<view class="girl-main-page flex-column-start-center">
		<view class="bg-box">
			<image class="bg-box-img" :src="bgUrl" mode="aspectFill"></image>
		</view>
		<view class="girl-info-box">
			<view class="girl-top-info">
				<view class="avatar-box">
					<view class="avatar-content">
						<image class="avatar-content-img" :src="avatar" mode="aspectFill"></image>
					</view>
				</view>
				<view class="attr-box">
					<view class="girl-name-box">{{name}}</view>
					<view class="attr-list flex-row-start-center">
						<view class="attr-item" v-for="(item,index) in attrList" :key="index">
							<view class="line-box"></view>
							<view class="attr-item-content">
								<view class="attr-value-box">{{item.value}}</view>
								<view class="attr-name-box">{{item.name}}</view>
								<image class="attr-img" :src="item.image" mode="aspectFill"></image>
							</view>

						</view>
					</view>
				</view>
			</view>


		</view>
		<view class="tab-box">
			<view class="line-box top-line"></view>
			<view class="line-box bottom-line"></view>
			<view class="tab-list">
				<view class="tab-item" :class="{'act-tab':index==actTabIndex}" v-for="(item,index) in tabList"
					:key="index" @click="handleTabClick(item,index)">
					{{item.name}}
				</view>
			</view>
			<!-- :class="{'firstTab':actTabIndex==0,'centerTab':actTabIndex==1,'lastTab':actTabIndex==2}" -->
			<view class="active-line" :style="{left:((100/(tabList.length*2))*(actTabIndex*2+1))+'%'}"></view>

		</view>
		<view class="show-content">
			<swiper style="width: 100%;height: 100%;" :current="actTabIndex" @change="handleSwiperChange"
				duration="300">
				<swiper-item v-for="(item, index) in tabList" :key="index">
					<view class="swiper-content">
						<view class="dynamics-box" v-if="item.type=='dynamics'">
							<scroll-view :scroll-y="true" class="scroll-content">
								<view class="dynamics-item" v-for="(ditem,dindex) in dynamicList" :key="dindex">
									<view class="dy-bottom-line"></view>
									<view class="left-avatar">
										<view class="dy-girl-avatar">
											<image class="dy-girl-avatar-img" :src="avatar" mode="aspectFill"></image>
										</view>
									</view>

									<view class="right-content">
										<view class="dy-top-info">
											<view class="dy-girl-other-info">
												<view class="dy-girl-name">
													<text class="name-text">妙陈</text>
													<view class="heart-num">
														<image class="heart-num-icon"
															src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/c49ae88f2c0340bebc08d0690b1115b4.png"
															mode="aspectFill"></image>
														<view class="heart-num-text">12</view>
													</view>
												</view>
												<view class="dy-release-time">{{ditem.createTime|createTimeFilter}}
												</view>
											</view>

										</view>
										<view class="center-text-box" v-if="ditem.text">
											{{ditem.text}}
										</view>
										<view class="bottom-picture-box" v-if="ditem.photoList.length">
											<view class="pictrue-list" v-if="ditem.photoList.length>1">
												<view class="picture-item" v-for="(pitem,pindex) in ditem.photoList"
													@click="handlePictureClick(ditem.photoList,pindex)" :key="pindex">
													<image class="picture-item-img" :src="pitem" mode="aspectFill">
													</image>

												</view>
											</view>
											<view class="picture-only" v-if="ditem.photoList.length==1">
												<image class="picture-only-img" :src="ditem.photoList[0]"
													@click="handlePictureClick(ditem.photoList,0)" mode="heightFix">
												</image>
											</view>
										</view>

										<view class="bottom-video-box" v-if="ditem.videoUrl">
											<view class="video-box" @click="handleVideoBoxClick">
												<video class="video-box-content" id="video1" ref="video1"
													:src="ditem.videoUrl" :loop="false" :muted="false" :autoplay="false"
													:play-strategy="2" :http-cache="false" :show-play-btn="false"
													:enable-play-gesture="false" play-btn-position="center"
													:controls="false" :show-fullscreen-btn="false"
													:show-progress="false" :page-gesture="false" :vslide-gesture="false"
													:vslide-gesture-in-fullscreen="false" :show-loading="false"
													:enable-progress-gesture="false" :mobilenet-hint-type="0"
													:show-center-play-btn="false" object-fit="cover"></video>
												<view class="play-video-masker"
													@click="handleVideoPlayClick(ditem.videoUrl)">
													<image class="play-video-img"
														src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/063778b7c3ba4e589fa74f63efa42333.png"
														mode="aspectFill"></image>
												</view>
											</view>
										</view>
									</view>


								</view>
							</scroll-view>
						</view>


						<view class="album-box flex-column-start-center" v-if="item.type=='album'">
							<view class="album-content">
								<scroll-view :scroll-y="true" class="scroll-content">
									<view class="album-list flex-row-start-start">
										<view class="album-item flex-row-center-center"
											v-for="(aItem,aIndex) in albumList" :key="aIndex"
											@click="handleAlbumItmeClick(aItem,aIndex)">
											<image class="cover-img" :src="aItem.coverImage" mode="aspectFill"></image>
											<image class="video-icon" v-if="aItem.type=='video'"
												src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/063778b7c3ba4e589fa74f63efa42333.png"
												mode="aspectFill"></image>

											<view class="album-locked-masker" v-if="aItem.locked">
												<view class="album-locked-content flex-column-start-center">
													<view class="album-locked-icon">
														<image class="cover-img"
															src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/acb0459908234cf3b311f42f917623e5.png"
															mode="aspectFill"></image>
													</view>
													<view class="album-locked-tip">好感等级达到20解锁</view>

												</view>
											</view>
										</view>
									</view>
								</scroll-view>
							</view>

						</view>


						<view class="show-room-box flex-column-start-center" v-if="item.type=='showRoom'">
							<view class="gifts-show-box ">
								<scroll-view :scroll-y="true" class="scroll-content">
									<view class="gifts-show-list flex-row-start-start">
										<view class="gift-item flex-column-start-center"
											v-for="(gitem,gindex) in gifsList" :key="gindex">
											<image class="gift-item-icon" :src="gitem.image" mode="aspectFill"></image>

											<view class="gift-name flex-row-center-center">{{gitem.name}}</view>
											<view class="gift-num flex-row-center-center">{{gitem.num}}</view>

											<view class="gift-not-get-masker flex-row-center-center" v-if="!gitem.num">
												<view class="gift-not-get-tip">未点亮</view>
											</view>
										</view>
									</view>
								</scroll-view>

							</view>
						</view>




					</view>
				</swiper-item>
			</swiper>
		</view>

		<view class="previewVideoModal" v-show="showPreviewVideo">
			<video class="previewVideoContent" id="girlShowVideo" :src="previewVideoUrl" :loop="true" :muted="false"
				:autoplay="false" :play-strategy="2" :http-cache="false" :show-play-btn="false"
				:enable-play-gesture="false" play-btn-position="center" :controls="true" :show-fullscreen-btn="false"
				:show-progress="true" :page-gesture="false" :vslide-gesture="false"
				:vslide-gesture-in-fullscreen="false" :show-loading="false" :enable-progress-gesture="false"
				:mobilenet-hint-type="0" :show-center-play-btn="false" object-fit="cover"></video>
			<view class="video-cover-click" @click="handleClosePreview"></view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	export default {
		props: {
			storyId: {
				type: String,
				default: "",
			},
		},
		data() {
			return {
				name: "妙陈",
				girlShowVideoContext: null,
				showPreviewVideo: false,
				bgUrl: "https://cdn.osisx.com/game/image/c083280c67a643b9a3d174186ef0f9f7.png",
				avatar: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/414625c0f8784bcc82f0e8b42e2567ea.jpg",
				previewVideoUrl: "",
				testVideoUrl: "https://cdn.osisx.com/game/e416845113cdf0df55ad616de9bf72b2/20241108/VIDcf22c579/VIDcf22c579.mp4",
				actTabIndex: 0,
				albumList: [{
						coverImage: "https://cdn.osisx.com/game/image/5f5c3cd3b77049a3ae304c993c39531d.png",
						photoList: ["https://cdn.osisx.com/game/image/5f5c3cd3b77049a3ae304c993c39531d.png",
							"https://cdn.osisx.com/game/image/17ae6b7c11014934afb997044cfaba51.png",
							"https://cdn.osisx.com/game/image/f4a9e404d07d48098de13bfaa70ae13f.png",
						],
						type: "image"
					},
					{
						coverImage: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/567b29869af94c57b29e93c1c056b2b4.jpg",
						photoList: [
							"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/567b29869af94c57b29e93c1c056b2b4.jpg",
							"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/76a8366303e94b35a39c907aece1776f.jpg",
							"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/bbb6a07f82dc4a49b23c293decb934dd.jpg"
						],
						type: "image"
					},
					{
						coverImage: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/29b157fea2ea402bb138f88e6445d6bb.jpg",
						photoList: [
							"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/29b157fea2ea402bb138f88e6445d6bb.jpg",
							"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/76bd4c499b9f49bb887f3f2b00795a0a.jpg",
							"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/156a0d00322149eca6aafe0ef1954f1f.jpg"
						],
						type: "image",
					},
					{
						coverImage: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/76a8366303e94b35a39c907aece1776f.jpg",
						photoList: [
							"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/76a8366303e94b35a39c907aece1776f.jpg",
							"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/bbb6a07f82dc4a49b23c293decb934dd.jpg",
							"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/29b157fea2ea402bb138f88e6445d6bb.jpg",
						],
						type: "image",
						locked: true
					},
					{
						coverImage: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/bbb6a07f82dc4a49b23c293decb934dd.jpg",
						photoList: [],
						type: "video",
						videoUrl: "https://cdn.osisx.com/game/e416845113cdf0df55ad616de9bf72b2/20241108/VIDcf22c579/VIDcf22c579.mp4",
						locked: true
					}
				],
				gifsList: [{
						name: "高射炮",
						num: 10,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/909b88b48f344d929066c0bf04ac387d.png"
					},
					{
						name: "我爱你",
						num: 18,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/b21b60c3368d44ebbeee9186d69dfdb2.png"
					},
					{
						name: "爱情鸟",
						num: 20,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/c4b29ea6a1e646bca3dad1e010d0de76.png"
					},
					{
						name: "加你卫星",
						num: 22,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/8cc0604091674ca48547a2ec64e3ad7c.png"
					},
					{
						name: "幸福拖拉机",
						num: 30,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/a2c498897e474e05aa213c1ebfff84d2.png"
					},
					{
						name: "浪漫约会",
						num: 15,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/b69d8504712845369ccef22396c913d7.png"
					},
					{
						name: "超级跑车",
						num: 19,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/5bf93b66f7984524929e4fe75b75f33a.png"
					},
					{
						name: "荧光棒",
						num: 30,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/a6e26c876aad477a846989c7f9112e32.png"
					},
					{
						name: "小螺号",
						num: 33,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/6e213b5bbf954372b90d8ea0470fa9cd.png"
					},
					{
						name: "豪华游艇",
						num: 20,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/a480114be8b847cb9e2ee516dae2f357.png"
					},
					{
						name: "烤肠玫瑰",
						num: 17,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/acd2c4a1658046b192566a59dcb5d56b.png"
					},
					{
						name: "私人飞机",
						num: 26,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/0b83b3124e114df8932e05d05a03a02f.png"
					},
					{
						name: "酷炫机车",
						num: 0,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/80b79c6575d64bf283921132aadd327e.png"
					},
					{
						name: "浪漫城堡",
						num: 0,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/6046b51ec87d44219c8823d2751788fd.png"
					},
					{
						name: "一炮而红",
						num: 0,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/38f351f1075345549b1c2f58bcb9b5c6.png"
					},
					{
						name: "爱情独角兽",
						num: 0,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/3f4a789c0e6c409e8d3d108da4463d8d.png"
					},
					{
						name: "深海浪漫",
						num: 0,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/56a7bbe6da7f4389ace4347188ae56f1.png"
					},
					{
						name: "游乐园",
						num: 0,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/20812aee8c8d421fa68c3cffe3a5a616.png"
					},
					{
						name: "动感耳机",
						num: 0,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/ad9fc60da139414a9cbd89541d3f7f81.png"
					},
				],
				dynamicList: [{
						createTime: 1732258882000,
						text: "非常开心，今天也是得吃了",
						photoList: [
							"https://cdn.osisx.com/game/image/5f5c3cd3b77049a3ae304c993c39531d.png",
							"https://cdn.osisx.com/game/image/17ae6b7c11014934afb997044cfaba51.png",
							"https://cdn.osisx.com/game/image/f4a9e404d07d48098de13bfaa70ae13f.png",
							"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/567b29869af94c57b29e93c1c056b2b4.jpg",
							"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/76a8366303e94b35a39c907aece1776f.jpg",
							"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/bbb6a07f82dc4a49b23c293decb934dd.jpg",
							"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/29b157fea2ea402bb138f88e6445d6bb.jpg",
							"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/76bd4c499b9f49bb887f3f2b00795a0a.jpg",
							"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/156a0d00322149eca6aafe0ef1954f1f.jpg"
						],
						videoUrl: ""
					},
					{
						createTime: 1732251682000,
						text: "哥哥，人家的瑜伽裤有点勒，可以帮我解一下吗？",
						photoList: [

						],
						videoUrl: "https://cdn.osisx.com/game/e416845113cdf0df55ad616de9bf72b2/20241108/VIDcf22c579/VIDcf22c579.mp4"
					},
					{
						createTime: 1732154482000,
						text: "好难过呀，好像去哥哥房间单独给哥哥表演吉他呢",
						photoList: [

						],
						videoUrl: "https://cdn.osisx.com/game/e416845113cdf0df55ad616de9bf72b2/20241108/VID435f26e9/VID435f26e9.mp4"
					},
					{
						createTime: 1732147282000,
						text: "天黑了，你准备好了吗哥哥~",
						photoList: [
							"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/29b157fea2ea402bb138f88e6445d6bb.jpg",
							"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/76bd4c499b9f49bb887f3f2b00795a0a.jpg",
							"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/156a0d00322149eca6aafe0ef1954f1f.jpg"
						],
						videoUrl: ""
					},
				],
				attrList: [{
						name: "人气",
						value: 5009,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/d15f2acafaf74929829fb3e915264451.png",
						// https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/e568c5338c39440fb5bb5a3628f27ead.png
					},
					{
						name: "心动",
						value: 12,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/c49ae88f2c0340bebc08d0690b1115b4.png"
					},
				],
				tabList: [{
						name: "动态",
						type: "dynamics"
					},
					{
						name: "相册",
						type: "album"
					},
					{
						name: "礼物",
						type: "showRoom"
					},
				],


			}
		},
		mounted() {
			this.girlShowVideoContext = uni.createVideoContext('girlShowVideo', this)
			// this.girlShowVideoContext.play()

		},
		computed: {
			...mapState(["curStoryId"]),
		},
		watch: {
			curStoryId: {
				handler(newVal, oldVal) {
					if (this.storyId && this.storyId != newVal) {
						this.handleClosePreview()
					}
				},
				deep: true,
				immediate: true,
			},
			showPreviewVideo: {
				handler(newVal, oldVal) {
					if (newVal) {
						this.$emit('hideBackBtn')
					} else {
						this.$emit('showBackBtn')
					}
				},
				immediate: true,
				deep: true
			}
		},
		filters: {
			createTimeFilter(timestamp) {
				const now = new Date();
				const date = new Date(timestamp);

				const secondsInADay = 24 * 60 * 60 * 1000;
				const diffTime = now - date; // 计算时间差
				const diffDays = Math.floor(diffTime / secondsInADay); // 计算相差天数

				const hours = date.getHours().toString().padStart(2, '0');
				const minutes = date.getMinutes().toString().padStart(2, '0');
				// const seconds = date.getSeconds().toString().padStart(2, '0');

				const timeString = `${hours}:${minutes}`;

				if (diffDays === 0) {
					return `今天 ${timeString}`; // 今天
				} else if (diffDays === 1) {
					return `昨天 ${timeString}`; // 昨天
				} else if (diffDays === 2) {
					return `前天 ${timeString}`; // 前天
				} else {
					return `${diffDays}天前 ${timeString}`; // 几天前
				}
			}
		},
		methods: {
			// handleSwiperTransition(e) {
			// 	console.log("数据1", e);
			// },
			handleAlbumItmeClick(item, index) {
				if (item.locked) {
					return
				}
				if (item.type == "image") {
					let list = item.photoList
					uni.previewImage({
						current: list[0], // 当前显示图片的http链接
						urls: list // 需要预览的图片http链接列表
					});
				} else if (item.type == 'video') {
					this.handleVideoPlayClick(item.videoUrl)
				}

			},
			handleClosePreview() {
				if (this.girlShowVideoContext) {
					this.girlShowVideoContext.seek(0)
					this.girlShowVideoContext.stop()
				}
				this.showPreviewVideo = false

			},
			handleVideoPlayClick(url) {
				this.previewVideoUrl = url
				this.showPreviewVideo = true
				this.$nextTick(() => {
					this.girlShowVideoContext.play()
				})

			},
			handleVideoBoxClick() {


			},
			handlePictureClick(list, index) {
				uni.previewImage({
					current: list[index], // 当前显示图片的http链接
					urls: list // 需要预览的图片http链接列表
				});
			},
			handleSwiperChange(e) {
				this.actTabIndex = e.detail.current
			},
			handleTabClick(item, index) {
				this.actTabIndex = index
			}
		}
	}
</script>

<style lang="scss" scoped>
	.girl-main-page {
		position: absolute;
		left: 0rpx;
		top: 0rpx;
		width: 100vw;
		height: 100vh;
		z-index: 999999999999999;
		box-sizing: border-box;
		pointer-events: none;
		overflow: hidden;
		background-color: #fff;



		.previewVideoModal {
			position: absolute;
			left: 0rpx;
			top: 0rpx;
			width: 100%;
			height: 100%;
			z-index: 9;
			pointer-events: fill;
			background-color: pink;

			.previewVideoContent {
				width: 100%;
				height: 100%;
			}

			.video-cover-click {
				position: absolute;
				left: 0rpx;
				top: 0rpx;
				width: 100%;
				height: 90vh;
				z-index: 9;
			}

		}

		.bg-box {
			width: 100%;
			height: 250rpx;
			background-color: rgba(0, 0, 0, .1);

			.bg-box-img {
				width: 100%;
				height: 100%;
			}
		}

		.girl-info-box {
			position: relative;
			width: 100%;
			height: 170rpx;
			pointer-events: fill;

			.girl-top-info {
				width: 100%;
				height: 150rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.avatar-box {
					position: relative;
					width: 250rpx;
					height: 100%;

					.avatar-content {
						position: absolute;
						left: 50%;
						transform: translateX(-50%);
						top: -50rpx;
						border-radius: 50%;
						width: 160rpx;
						height: 160rpx;
						background-color: #fff;
						box-sizing: border-box;
						padding: 2rpx;

						.avatar-content-img {
							width: 100%;
							height: 100%;
							border-radius: 50%;

						}

					}
				}

				.attr-box {
					flex: 1;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: center;

					.girl-name-box {
						width: 100%;
						// height: 30rpx;
						font-size: 32rpx;
						line-height: 32rpx;
						color: #000;
						text-align: left;
						margin: 20rpx 0rpx;
						font-weight: 700;
						// padding: 0rpx 25rpx;

					}


					.attr-list {
						width: 100%;
						// height: 80rpx;
						background-color: #fff;

						.attr-item {
							position: relative;
							// width: 120rpx;
							height: 100%;
							display: flex;
							// flex-direction: column;
							justify-content: center;
							align-items: center;
							box-sizing: content-box;
							padding: 0rpx 25rpx;

							.attr-item-content {
								display: flex;
								justify-content: flex-start;
								align-items: flex-end;
							}

							.line-box {
								position: absolute;
								right: 0rpx;
								top: 50%;
								transform: translateY(-50%);
								width: 1rpx;
								height: 30rpx;
								background-color: rgba(0, 0, 0, .1);
							}

							&:last-child {
								.line-box {
									display: none;
								}
							}

							&:first-child {
								padding-left: 0;
							}

							.attr-value-box {
								display: flex;
								justify-content: center;
								// align-items: center;
								align-items: flex-end;
								font-size: 32rpx;
								line-height: 28rpx;
								color: #000;
								font-weight: 700;
								margin-right: 5rpx;
							}

							.attr-name-box {
								display: flex;
								justify-content: center;
								align-items: flex-end;
								font-size: 18rpx;
								line-height: 18rpx;
								color: rgba(0, 0, 0, .5);
								margin-right: 5rpx;
								font-weight: 700;
							}

							.attr-img {
								width: 30rpx;
								height: 30rpx;
							}


						}
					}

				}
			}


		}



		.tab-box {
			position: relative;
			width: 100%;
			height: 80rpx;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			pointer-events: fill;

			.active-line {
				position: absolute;
				// left: 75%;
				transform: translateX(-50%);
				bottom: 0rpx;
				width: 60rpx;
				height: 4rpx;
				background-color: #ff679a;
				transition: all 0.3s;
				z-index: 9;
			}

			.firstTab {
				left: 16.6%;
			}

			.centerTab {
				left: 50%;
			}

			.lastTab {
				left: 83.26%;
			}



			.tab-list {
				position: relative;
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: flex-start;
				align-items: center;

			}

			.tab-item {
				flex: 1;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				text-align: center;
				font-size: 30rpx;
				line-height: 30rpx;
				color: rgba(0, 0, 0, .6);
				font-weight: 700;

				&:first-child {
					// background-color: green;
				}
			}

			.act-tab {
				color: #ff679a;
			}

			.line-box {
				position: absolute;
				left: 0rpx;
				width: 100%;
				height: 1rpx;
				background-color: rgba(0, 0, 0, .1);
				opacity: 0.6;
			}

			.top-line {
				top: 0rpx;
			}

			.bottom-line {
				bottom: 0rpx;
			}
		}

		.show-content {
			width: 100%;
			flex: 1;
			background-color: #fff;
			overflow: hidden;
			pointer-events: fill;


			.swiper-content {
				width: 100%;
				height: 100%;
				box-sizing: border-box;
				padding: 40rpx 40rpx;




				.dynamics-box {
					width: 100%;
					height: 100%;

					.dynamics-item {
						position: relative;
						width: 100%;
						display: flex;
						justify-content: flex-start;
						align-items: flex-start;
						padding-bottom: 20rpx;
						margin-bottom: 20rpx;

						.dy-bottom-line {
							position: absolute;
							left: 0rpx;
							bottom: 0rpx;
							width: 100%;
							height: 1rpx;
							background-color: rgba(0, 0, 0, .1);
							opacity: 0.6;
						}

						.left-avatar {
							width: 80rpx;
							margin-right: 20rpx;

							.dy-girl-avatar {
								width: 80rpx;
								height: 80rpx;
								border-radius: 50%;
								margin-right: 20rpx;

								.dy-girl-avatar-img {
									width: 100%;
									height: 100%;
									border-radius: 50%;
								}


							}
						}

						.right-content {
							flex: 1;

							.dy-top-info {
								width: 100%;
								height: 80rpx;
								display: flex;
								justify-content: flex-start;
								align-items: center;

								.dy-girl-other-info {
									flex: 1;
									height: 80rpx;
									display: flex;
									flex-direction: column;
									justify-content: center;

									.dy-girl-name {
										width: 100%;
										font-size: 26rpx;
										color: #000;
										line-height: 26rpx;
										font-weight: 700;
										display: flex;
										justify-content: flex-start;
										align-items: center;

										.name-text {
											margin-right: 10rpx;
										}

										.heart-num {
											position: relative;
											width: 30rpx;
											height: 30rpx;
											display: flex;


											.heart-num-icon {
												width: 100%;
												height: 100%;
											}

											.heart-num-text {
												position: absolute;
												left: 50%;
												top: 50%;
												transform: translate(-50%, -50%);
												width: 100%;
												height: 100%;
												font-size: 14rpx;
												line-height: 14rpx;
												color: #fff;
												display: flex;
												justify-content: center;
												align-items: center;
												z-index: 1;
											}
										}
									}

									.dy-release-time {
										width: 100%;
										font-size: 18rpx;
										color: rgba(0, 0, 0, .3);
										line-height: 18rpx;
										font-weight: 700;
										margin-top: 15rpx;
									}
								}

							}

							.center-text-box {
								width: 100%;
								font-size: 26rpx;
								line-height: 30rpx;
								color: #000;
								margin-top: 5rpx;

							}

							.bottom-picture-box {
								width: 100%;
								margin-top: 20rpx;

								.picture-only {
									height: 250rpx;

									.picture-only-img {
										height: 100%;
									}
								}

								.pictrue-list {
									width: 480rpx;
									display: flex;
									justify-content: flex-start;
									align-items: center;
									flex-wrap: wrap;

									.picture-item {
										width: 150rpx;
										height: 150rpx;
										margin-right: 10rpx;
										margin-bottom: 10rpx;

										&:nth-child(3n) {
											margin-right: 0rpx;

										}

										.picture-item-img {
											width: 100%;
											height: 100%;
										}
									}
								}

							}


							.bottom-video-box {
								// width: 100%;

								margin-top: 20rpx;

								.video-box {
									position: relative;
									// height: 250rpx;
									// max-width: 200rpx;
									// max-height: 300rpx;
									max-width: 240rpx;
									max-height: 330rpx;

									.video-box-content {
										max-width: 240rpx;
										max-height: 330rpx;

									}
								}

								.play-video-masker {
									position: absolute;
									left: 0rpx;
									top: 0rpx;
									width: 100%;
									height: 100%;
									z-index: 1;
									display: flex;
									justify-content: center;
									align-items: center;

									.play-video-img {
										width: 60rpx;
										height: 60rpx;
										border-radius: 50%;
										background-color: rgba(0, 0, 0, .3);
									}
								}
							}

						}



					}
				}


				.album-box {
					width: 100%;
					height: 100%;

					.album-content {
						width: 664rpx;
						height: 100%;

						.album-list {
							width: 100%;
							flex-wrap: wrap;

							.album-item {
								position: relative;
								width: 220rpx;
								height: 300rpx;
								margin-right: 2rpx;
								margin-bottom: 2rpx;

								&:nth-child(3n) {
									margin-right: 0px;
								}

								.video-icon {
									position: absolute;
									left: 50%;
									top: 50%;
									transform: translate(-50%, -50%);
									width: 60rpx;
									height: 60rpx;
									border-radius: 50%;
									z-index: 9;
								}

								.album-locked-masker {
									position: absolute;
									left: 0rpx;
									top: 0rpx;
									width: 100%;
									height: 100%;
									background-color: rgba(0, 0, 0, .8);
									z-index: 10;

									.album-locked-content {
										position: absolute;
										left: 0rpx;
										top: 50%;
										transform: translateY(-50%);
										width: 100%;

										.album-locked-icon {
											width: 30rpx;
											height: 30rpx;

										}

										.album-locked-tip {
											font-size: 20rpx;
											line-height: 20rpx;
											margin-top: 10rpx;
											color: #fff;
										}
									}
								}
							}
						}
					}
				}

				.show-room-box {
					width: 100%;
					height: 100%;
					overflow: hidden;

					.gifts-show-box {
						flex: 1;
						width: 660rpx;
						overflow: hidden;

						.gifts-show-list {
							width: 100%;
							flex-wrap: wrap;
						}

						.gift-item {
							position: relative;
							width: 150rpx;
							height: 200rpx;
							border-radius: 8rpx;
							background-color: #ffebf4;
							margin-bottom: 20rpx;
							margin-right: 20rpx;
							overflow: hidden;


							&:nth-child(4n) {
								margin-right: 0rpx;
							}

							.gift-item-icon {
								width: 150rpx;
								height: 150rpx;
								margin-top: 10rpx;
							}

							.gift-name {
								flex: 1;
								width: 100%;
								text-align: center;
								font-size: 20rpx;
								line-height: 20rpx;
								color: rgba(0, 0, 0, .8);

							}

							.gift-num {
								position: absolute;
								right: 0rpx;
								top: 0rpx;
								min-width: 50rpx;
								height: 25rpx;
								border-bottom-left-radius: 8rpx;
								font-size: 18rpx;
								line-height: 18rpx;
								color: rgba(0, 0, 0, .8);
								font-weight: 700;
								background-color: #f9d972;

							}

							.gift-not-get-masker {
								position: absolute;
								left: 0rpx;
								top: 0rpx;
								width: 100%;
								height: 100%;
								background-color: rgba(0, 0, 0, .5);
								z-index: 10;

								.gift-not-get-tip {
									width: 100%;
									height: 30rpx;
									color: #fff;
									background-color: rgba(0, 0, 0, .4);
									font-size: 18rpx;
									line-height: 30rpx;
									opacity: 0.8;
									text-align: center;

								}
							}

						}
					}
				}

			}
		}

	}
</style>